<style type="text/css">
	#AddDev{
		position:fixed;
		top:0px;
		line-height:1.111rem;
		text-align:right;
		font-size:0.4rem;
		color:#575757;
		right:0.5rem;
		display:none;
	}
	ul.list{
		margin:0 0.5rem;
	}
	a.list-item{
		text-decoration:none;
	}
	li.list-item{
		font-size:0;
		height:1.25rem;
		line-height:1.25rem;
		overflow:hidden;
		border-bottom:1px solid #E9E9E9;
	}
	a.list-item:last-child li.list-item{
		border-bottom:0;
	}
	div.left-con{
		float:left;
		width:20%;
	}
	i.verdor-icon{
		font-size:1.25rem;
		display:inline-block;
	}
	div.right-con{
		float:right;
		width:80%;
	}
	p.list-con-l{
		font-size:0;
		float:left;
	}
	p.list-con-r{
		position:relative;
		color:#949494;
		font-size:0.4rem;
		float:right;
		max-width:2rem;
		text-align:right;
		min-width:2rem;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	span.list-con1{
		color:#575757;
		font-size:0.417rem;
	}
	i.dev-other{
		float:right;
		line-height:1.25rem;
		font-size:0.5rem;
		color:#A8A8A8;
		-webkit-transform: rotate(180deg);
	}
</style>
<script type="text/javascript">
(function(){
	<%
		local para = {
			parent_ctrl = {config = {}, parent_list = {}},
			device_manage = {client_list = {}}
		}

		local result = tpl_get_data(para, true)
	-%>

	var parentInfo = <%=result%>;

	function setTimeData(hour, minute){
		var time;
		time = hour * 3600;
		time += minute * 60;
		return time;
	}

	function getCurTime(){ // HourMinutes   1012
		var date = new Date();
		var curtime = setTimeData(date.getHours(), date.getMinutes());
		return curtime;
	}

	function getCurDay(){
		var date = new Date();
		var day = ""+date.getDay();
		if(day == "0"){
			return 6;
		}
		return Number(day)-1;
	}

	init(parentInfo);

	function init(result){
		var errNo = result[ERR_CODE];
		var ret;
		if (E_NONE == errNo){
			ret = result[K_MODULE];
		}else{
			console.log(result);
			return;
		}

		var switchParent = ret.parent_ctrl.config;

		initSwitch("SwitchParent", switchParent.enable, function(state,init){
			if (1 == state){
				$("#ParentList").show();
				$("#AddDev").show();
			}else{
				$("#ParentList").hide();
				$("#AddDev").hide();
			}

			if (!init){
				var data = {};
				var para = {};
				para.parent_ctrl = {};
				para.parent_ctrl.config = data;

				data.enable = $("#SwitchParent").attr("data-value");
				showLoading(label.saving);
				apiSet(para, function(){
					$.setTimeout(function(){
						closeLoading();
					}, 2000);
				});
			}
		});
	}

	var devList = [];
	var parentList = parentInfo[K_MODULE].parent_ctrl.parent_list;

	getDevlist(parentList);
	parentRule(devList);

	function checkDev(rule){
		for(var i = 0; i < devList.length; ++i){
			if (rule["mac"] == devList[i]["mac"]){
				return i;
			}
		}
		return -1;
	}

	function getDevlist(rules){
		for(var i = 0; i < rules.length; ++i){
			var flag = checkDev(rules[i]);
			if(flag == -1){
				var dev={};
				dev["name"] = rules[i]["name"];
				dev["mac"] = rules[i]["mac"];
				dev["brand"] = rules[i]["brand"];
				dev["AccessNetwork"] = checkAccessNetwork(rules[i]);
				devList.push(dev);
			}else{
				devList[flag]["AccessNetwork"] = checkAccessNetwork(rules[i]);
			}
		}
	}

	function checkAccessNetwork(client){
		for (var i = 0; i < devList.length; i++){
			if (devList[i]["MAC"] == client["MAC"]){
				if (devList[i]["AccessNetwork"] == label.forbid){
					return label.forbid;
				}
			}
		}

		if (Number(getCurTime()) >= Number(client.start_time) &&
			Number(getCurTime()) <= Number(client.end_time) &&
			client["cycle"][getCurDay()] == "1"){
			return label.forbid;
		}else{
			return label.allow;
		}
	}

	function JSON2UriParam(data){
		return $.param(data).replace(/\+/g, '%20');
	}

	function parentEntry(client){
		var param = JSON2UriParam(client);
		var vendor;

		if(client.brand){
			vendor = "icon_" + getAlias(client.brand);
		}else{
			vendor = "icon_" + getVendor(client.mac);
		}

		var devName = htmlEscape(getStrInMax(client.name, 16));
		var AccessNetwork = client.AccessNetwork;
		return '<a href="#/parentCtrlRule/?' + param + '" class="list-item"><li class="list-item">' +
			'<div class="left-con"><i class="verdor-icon ' + vendor + '"></i></div>' +
			'<div class="right-con">' +
				'<p class="list-con-l">' +
					'<span class="list-con1">' + devName + '</span>'+
				'</p>' +
				'<i class="icon_back dev-other"></i>' +
				'<p class="list-con-r">' + AccessNetwork + '</p>' +
			'</div>' +
		'</li></a>';
	}

	function parentRule(clients){
		var parentListObj = $("#ParentList");
		var len = clients.length;
		for (var i = 0; i < len; i++){
			parentListObj.append(parentEntry(clients[i]));
		}
	}

	$("#AddDev").click(function(){
		stateman.go("devList");
	});
})();
</script>
<div class="head-con">
	<a href="#/phone/App" class="head-btn-l"><i class="head-btn icon icon_back"></i></a>
	<h1 class="head-title">{%label.parentCtrl%}</h1>
	<span id="AddDev">{%label.add%}</span>
</div>
<div class="set-con below-head">
	<ul class="blank-bg"></ul>
	<ul class="set-con">
		<div class="switch-con">
			<label class="desc-title">{%label.parentCtrl%}</label>
			<span id="SwitchParent" class="switch">
				<i class="switch-circle"></i>
			</span>
		</div>
		<p class="desc-tetail">{%label.parentCtrlRemark%}</p>
	</ul>
	<ul class="blank-bg"></ul>
	<ul id="ParentList" class="list"></ul>
</div>